<style>
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
}
 
.k-grid table {
    table-layout: fixed;
}

.k-edit-form-container
{
	text-align:center;
	width:100%;
}
</style>
<script type="text/javascript" src="/js/app/test.js"></script>
<script>
    var dataSourceAjax = null;
    var grid = null;
    
    
    $(document).ready(function() {        
        grid = new Test.Grid("grid");    		
    });
    
    function btnSearchClick()
    {
        grid.refresh();
    }
      
	function getDate()
	{
		alert($("#testDate").val());
	}
	  
</script>

<script id="teamEditorTemplate" type="text/x-kendo-template">
<div style="width:720px;">	
<dl>         
	<dt class="first"><label for="domain">Domain: </label></dt>
	<dd class="first"><input type="text" class="k-textbox" name="domain" data-bind="value:domain"/></dd>
	<dt class="second">Status: </dt>
	<dd class="second">
		<select name="status" data-bind="value:status" data-role="dropdownlist">
			<option>New</option>
			<option>Paying</option>
			<option>Monitor</option>
			<option>Invest</option>
			<option>Invested</option>
			<option>Scam</option>
		</select>
	</dd>
	<dt class="first">IP: </dt>
	<dd class="first"><input type="text" class="k-textbox" name="ip" data-bind="value:ip" /></dd>
			<dt class="second">Plan type: </dt>
	<dd class="second"> 
		<select name="planType" data-bind="value:planType" data-role="dropdownlist">
			<option>Very short</option>
			<option>Short</option>
			<option>Long</option>
			<option>Very long</option>
		</select>
	</dd>
	<dt class="first">Start date: </dt>
	<dd class="first"><input id="startDate" name="startDate" data-bind="value:startDate" data-role="datepicker" data-format="dd/MM/yyyy" /></dd>
	<dt class="second">End date: </dt>
	<dd class="second"><input id="endDate" name="endDate" data-bind="value:endDate" data-role="datepicker" data-format="dd/MM/yyyy"/></dd>
	<dt class="first">Start domain: </dt>
	<dd class="first"><input id="startDomain" name="startDomain" data-bind="value:startDomain" data-role="datepicker" data-format="dd/MM/yyyy"/></dd>
	<dt class="second">End domain: </dt>
	<dd class="second"><input id="endDomain" name="endDomain" data-bind="value:endDomain" data-role="datepicker" data-format="dd/MM/yyyy"/></dd>
			<dt class="first">Joined date: </dt>
	<dd class="first"><input id="joinedDate" name="joinedDate" data-bind="value:joinedDate" data-role="datepicker" data-format="dd/MM/yyyy"/></dd>
	<dt class="second">profit type: </dt>
	<dd class="second">
		<select name="profitType" data-bind="value:profitType" data-role="dropdownlist">
			<option>Low</option>
			<option>Medium</option>
			<option>High</option>
			<option>Ultra</option>                            
		</select>
	</dd>	
	<dt style="clear:both;">Plan: </dt>
	<dd>
		<textarea rows="10" cols="30" style="width:600px;height:300px" data-bind="value:plan" data-role="editor"></textarea>
	</dd>
</dl>
<div style="clear:both;"></div>
</div>  
</script>

<div>
<input id="testDate" data-role="datepicker"/>
<button onclick="getDate();">Get date</button>
</div>
<div id="tabstrip">
	<ul>
		<li class="k-state-active">
			Search
		</li>		        
	</ul>
</div>
<hr/>
<hr/>
<div id="grid" style="width:700px; height:400px;"></div>